<template>
	<div class="app-container">
		<div class="bgWhite radius8 pl20 pr20  pt30 pb30">
			<div class="fb fs18 pb25">
				{{userInfo.customerName}}
			</div>
			<div>
				<div class="fs14">
					<span class="color2">客户名称：</span><span>{{userInfo.customerName}}</span>
					<el-divider direction="vertical" />
					<span class="color2">客户类型：</span><span>{{userInfo.customerTypeName}}</span>
				</div>
				<div class="fs14 mt10">
					<span class="color2">下次跟进：</span>{{userInfo.nextFollowUpTime}} 
				</div>
			</div>
			<div class="mt20">
				<el-button type="defaultBtn" style="height: 32px;"
				 @click="handleEditUser(userId)"
				>编辑客户</el-button>
				<el-button type="operate" style="width: 88px;height: 32px;"
				@click="handelDialog()"
				>写新跟进</el-button>
				<el-button type="operate" style="width: 88px;height: 32px;"
				v-hasPermi="['customer:index:add']"
				@click="handleOrder(userInfo)"
				>新建订单</el-button>
				<el-button type="operate" style="min-width: 88px;height: 32px;"
				@click="handleFavaorite()"
				>{{!userInfo.favoriteId ? '重点关注' : '取消重点关注'}}</el-button>
				<el-button type="operate" style="min-width: 88px;height: 32px;" 
				@click="userInfo.isInvalid == 0 ? invalidCustomer() : ''"
				:class="{'invalid':userInfo.isInvalid == 1}"
				>无效客户</el-button>
			</div>
		</div>
		<div class="bgWhite radius8 mt20">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="概况信息" name="message1">
					<tab1 ref="dialog" :customerTypeProps="customerTypeProps" :dialogVisible="centerDialogVisible"></tab1>
				</el-tab-pane>
				<el-tab-pane label="详细信息" name="message2">
					<tab2 :activeName="activeName" :customerTypeProps="customerTypeProps"></tab2>
				</el-tab-pane>
				<el-tab-pane label="跟进记录" name="message3">
					<tab3 :activeName="activeName" :customerTypeProps="customerTypeProps"></tab3>
				</el-tab-pane>
				<el-tab-pane label="订单分析" name="message4">
					<tab4 :activeName="activeName" :customerTypeProps="customerTypeProps"></tab4>
				</el-tab-pane>
				<el-tab-pane label="订单记录" name="message5">
					<tab5 :activeName="activeName" ref="orderRecord" :customerTypeProps="customerTypeProps"></tab5>
				</el-tab-pane>
				<el-tab-pane label="作物结构" name="message6">
					<tab6 :activeName="activeName" :customerTypeProps="customerTypeProps"></tab6>
				</el-tab-pane>
				<el-tab-pane label="销售规模" name="message7">
					<tab7 :activeName="activeName" :customerTypeProps="customerTypeProps" ></tab7>
				</el-tab-pane>
				<el-tab-pane label="归属记录" name="message8">
					<tab8 :customerTypeProps="customerTypeProps" 
					:bus_customer_type="bus_customer_type"
					:bus_customer_status="bus_customer_status"
					:activeName="activeName"
					></tab8>
				</el-tab-pane>
			</el-tabs>
		</div>
		<!-- 新增客户弹窗 -->
		<operateCustomer ref="customerPop" @refreshList="getList"></operateCustomer>
		<!-- //新建订单弹窗 -->
		<operateOrder ref="addOrder" @refreshList="getList" :addOrderCustomerMes="addOrderCustomerMes"></operateOrder>
	</div>
</template>

<script name="Portrait"> 
    import {customerDetail,invalidCustomer,cancelFavorite,favorite} from '@/api/business/customer' 
	import operateCustomer from './components/operateCustomer.vue' //新增/编辑客户
	import operateOrder from '@/views/business/order/components/operateBox.vue' //新建订单弹窗
	import tab1 from "./components/userMes/tab1.vue"
	import tab2 from "./components/userMes/tab2.vue"
	import tab3 from "./components/userMes/tab3.vue"
	import tab4 from "./components/userMes/tab4.vue"
	import tab5 from "./components/userMes/tab5.vue"
	import tab6 from "./components/userMes/tab6.vue"
	import tab7 from "./components/userMes/tab7.vue"
	import tab8 from "./components/userMes/tab8.vue"
	export default{
		components:{
			operateCustomer,
			operateOrder,
			tab1,
			tab2,
			tab3,
			tab4,
			tab5,
			tab6,
			tab7,
			tab8
		},
		data(){
			return{
				centerDialogVisible:false,
				activeName:'message1',
				userId:'',
				userInfo:{},
				bus_customer_type:this.useDict('bus_customer_type').bus_customer_type,//客户类型
				bus_channel:this.useDict('bus_channel').bus_channel,//客户来源
				bus_source:this.useDict('bus_source').bus_source,//来源渠道
				bus_customer_status:this.useDict('bus_customer_status').bus_customer_status,//客户状态
				customerTypeProps:{
					userId:'',
					customerTypeName:'',
					opportunityChannelName:'',
					opportunitySourceName:'',
					customerStatusName:'',
					bus_followup_type:this.useDict('bus_followup_type').bus_followup_type
				},
				addOrderCustomerMes: {}, //要创建订的客户信息
			}
		},
		created() {
			this.userId = this.$route.params.userId
			this.customerTypeProps.userId = this.userId
			console.log(this.$route.params.userId)
			this.customerDetail()
		},
		methods:{
			getList(){
				this.$refs.orderRecord.orderRecord()
			},
			// 编辑客户
			handleEditUser(userId){
				this.$refs.customerPop.open(userId)
			},
			// 新建订单
			handleOrder(row) {
				this.addOrderCustomerMes = {
					customerId:row.id,
					customerName:row.customerName,//客户姓名
					opportunitySource:row.opportunitySource,//客户来源
					businessManagerId:row.businessManagerId,//业务经理id
					businessManagerName:row.businessManagerName,//业务经理名称
				}
				// console.log(this.addOrderCustomerMes,'addOrderCustomerMes')
				// this.addOrderCustomerId = row.id //要新建订单的客户id
				setTimeout(()=>{
					this.$refs.addOrder.open('')
				},200)
			},
			handleUser(url){
				this.$router.push(url)
			},
			handleFavaorite(){
				if(!this.userInfo.favoriteId){
					this.favorite()
				}else{
					this.cancelFavorite()
				}
			},
			//重点关注
			favorite(){
				favorite(this.userId).then(res=>{
					this.$message(
						{
						  message: '已重点关注',
						  type: 'success'
						}
					);
					this.customerDetail()
				})
			},
			cancelFavorite(){
				cancelFavorite(this.userInfo.favoriteId).then(res=>{
					this.$message(
						{
						  message: '已取消重点关注',
						  type: 'success'
						}
					);
					this.customerDetail()
				})
			},
			//设置为无效客户
			invalidCustomer(){
				let that = this
				this.$modal
					.confirm('是否确认设置"' + that.userInfo.customerName + '"为无效客户？')
					.then(function() {
						invalidCustomer(that.userId).then(res=>{
							that.$message(
								{
								  message: '已设置无效客户',
								  type: 'success'
								}
							);
							that.userInfo.isInvalid = 1
							that.$forceUpdate()
						})
					})
					.catch(() => {});
				
			},
			customerDetail(){
				customerDetail(this.userId).then(res=>{
					this.userInfo = res.data
					for(let key in this.bus_customer_type){
						if(this.userInfo.customerType == this.bus_customer_type[key].value){
							this.userInfo.customerTypeName = this.bus_customer_type[key].label
						}
					}
					for(let key in this.bus_channel){
						if(this.userInfo.opportunityChannel == this.bus_channel[key].value){
							this.userInfo.opportunityChannelName = this.bus_channel[key].label
						}
					}
					for(let key in this.bus_source){
						if(this.userInfo.opportunitySource == this.bus_source[key].value){
							this.userInfo.opportunitySourceName = this.bus_source[key].label
						}
					}
					for(let key in this.bus_customer_status){
						if(this.userInfo.customerStatus == this.bus_customer_status[key].value){
							this.userInfo.customerStatusName = this.bus_customer_status[key].label
						}
					}
					this.customerTypeProps.customerStatusName = this.userInfo.customerStatusName
					this.customerTypeProps.opportunitySourceName = this.userInfo.opportunitySourceName
					this.customerTypeProps.opportunityChannelName = this.userInfo.opportunityChannelName
					this.customerTypeProps.customerTypeName = this.userInfo.customerTypeName
				})
			},
			// 写跟进
			handelDialog(){
				this.$refs.dialog.open()
			},
			handleClick(e){
				
			}
		}
	}
</script>

<style>
	.demo-tabs .el-tabs__item{
		padding: 30px 20px;
	}
	.el-button.invalid,.el-button.invalid:hover{
		color: #999!important;
		border-color: #cbcbcb!important;
		background: #f5f5f5!important;
		cursor: no-drop!important;
	}
	/* .borderColorGray{
		color: #999!important;
		border-color: #cbcbcb!important;
	} */
</style>